import headerTools from '@/builder/mixins/card-header-tools'

export default {
  name: 'AdminTable',
  mixins: [headerTools],
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
    page: {
      type: Object,
      default: () => ({}),
    },
  },
  render(h) {
    const self = this

    const columns = this.columns.map((c) => {
      if (c.name !== '_action') {
        return h('el-table-column', {
          props: {
            prop: c.name,
            label: c.label,
          },
        })
      }

      // action
      return h('el-table-column', {
        props: {
          prop: c.name,
          label: c.label,
        },
        scopedSlots: {
          default(scope) {
            const actions = scope.row._action.map((a) => {
              return h(a.component, {
                props: {
                  ...a.props,
                  size: 'mini',
                  data: self.data,
                  row: scope.row,
                  index: scope.$index,
                },
              })
            })
            return h('el-button-group', { props: { size: 'small' } }, actions)
          },
        },
      })
    })

    const table = h('el-table', {
      props: {
        data: this.data,
        stripe: true,
        border: true,
      },
    }, columns)

    const pagination = h('admin-pagination', {
      props: {
        currentPage: Number(this.page.current_page),
        perPage: Number(this.page.per_page),
        total: Number(this.page.total),
        pageSizes: this.page.page_sizes,
      },
    })

    return h('el-card', {
      class: {
        'admin-card': true,
      },
    }, [
      this.makeCardHeader(h),
      h('div', {
        class: {
          'card-body': true,
        },
      }, [table]),
      h('div', {
        class: {
          'card-footer': true,
        },
      }, [pagination]),
    ])
  },
}
